<template>
  <div>
    <template>
      <el-card class="profile-card">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-image
                :src="profile.avatarUrl"
                fit="cover"
                class="avatar-image"
            ></el-image>
          </el-col>
          <el-col :span="16" >
            <div class="user-info">
              <h2 style="margin-bottom: 20px; font-size: 40px; color: #444444">{{ profile.username }}</h2>
              <p style="margin-bottom: 10px;">UID: {{ profile.uid }}</p>
              <p style="margin-bottom: 10px;">等级: {{ profile.level }}</p>
              <el-button type="primary" size="small">发私信</el-button>
            </div>
          </el-col>
        </el-row>

        <el-row class="stats-row" :gutter="20">
          <el-col :span="6" v-for="(stat, index) in profile.stats" :key="index">
            <el-card shadow="never" class="stat-card">
              <div class="stat-icon" :style="{ backgroundColor: stat.color }">
                <i :class="stat.icon"></i>
              </div>
              <div class="stat-value">{{ stat.value }}</div>
              <div class="stat-label">{{ stat.label }}</div>
            </el-card>
          </el-col>
        </el-row>

        <div class="content-section">
          <h3>内容数据 <span>(近7日)</span></h3>
          <el-link type="primary" class="more-link">查看更多</el-link>
        </div>

        <div class="entry-section">
          <h3>入站简文</h3>
          <el-input
              type="textarea"
              :rows="4"
              placeholder="这里是入站的一段对于自由的理解的文字"
              v-model="profile.entryText"
          ></el-input>
        </div>
      </el-card>
    </template>


  </div>
</template>

<script>
import {useRoute} from "vue-router/composables";

export default {
  data() {
    return {
      profile: {
        username: "一只成熟的人",
        uid: 2,
        level: 4,
        avatarUrl: "https://azrael-first.oss-cn-shanghai.aliyuncs.com/1.jpg",
        entryText: "",
        stats: [
          { label: "粉丝与访客", value: "12", icon: "el-icon-user", color: "#409EFF" },
          { label: "获赞与收藏", value: "368", icon: "el-icon-star-on", color: "#67C23A" },
          { label: "日新增评论", value: "8", icon: "el-icon-chat-line-round", color: "#E6A23C" },
          { label: "文章数", value: "2.8%", icon: "el-icon-data-line", color: "#F56C6C" },
        ],
      },
    };
  },
  methods: {
    handleChange(val) {
      console.log(val);
    },
    getData() {
      let uid = useRoute().params.uid;
      let url = `/api/user/user-user/${uid}`;
      this.$http
          .get(url, { headers: { token: this.token } })
          .then((response) => {
            if (response.data.code === 20000) {
              this.profile.username = response.data.data.uname;
              this.profile.uid = response.data.data.uid;
              this.profile.entryText = response.data.data.uintroduction;
              this.profile.stats.at(1).value = 10;
              this.profile.stats.at(3).value = 1;
              this.profile.avatarUrl = response.data.data.uheadshot;
            } else {
              if (response.data.code === 40100) {
                this.$router.push("/login");
              }
              this.$message.error("请登录");
            }
          })
          .catch((error) => {
            this.$message.error("获取信息失败：" + error.message);
          });
    },
  },
  created() {
    this.token = localStorage.getItem("token");
    if (!this.token) {
      this.$router.push("/login");
    } else {
      this.getData();
    }
  },
};
</script>

<style scoped>
.profile-card {
  max-width: 800px;
  margin: 0 auto;
}

.avatar-image {
  width: 100%;
  max-height: 200px;
  object-fit: cover;
}

.user-info {
  padding: 20px 0;
  margin-left: 30px;
}

.stats-row {
  margin-top: 20px;
}

.stat-card {
  text-align: center;
  padding: 10px;
}

.stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 10px;
}

.stat-icon i {
  color: white;
  font-size: 20px;
}

.stat-value {
  font-size: 18px;
  font-weight: bold;
}

.stat-label {
  font-size: 12px;
  color: #909399;
}

.content-section, .entry-section {
  margin-top: 20px;
}

.content-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.content-section h3 span {
  font-size: 12px;
  color: #909399;
}

.more-link {
  font-size: 12px;
}
</style>